<template>
  <a-card :bordered="false">
    <!-- 抽屉 -->
    <a-drawer title="特色功能分类" width="680px" @close="onClose" :visible="visible">
      <!-- 抽屉内容的border -->
      <div>
        <div class="search-group" style="padding: 0">
          <div class="input-wrap" style="width: 55%">
            <div class="label">功能类别:</div>
            <div class="input-item" style="width: 100%">
              <a-input placeholder="请输入功能类别" :maxLength="30" v-model="queryParam.deviceConfigName" />
            </div>
          </div>

          <div class="btn-group">
            <a-button class="searchBtn" @click="searchQuery()" type="primary"> 搜索 </a-button>
            <a-button class="resetBtn" style="margin: 0 20px" @click="searchReset()" type="primary"> 重置 </a-button>
            <a-button class="searchBtn" @click="addEditHandle()" type="primary" style="margin-left: 10px">
              新增
            </a-button>
          </div>
        </div>
        <div>
          <a-table
            rowKey="id"
            class="tableList"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            @change="handleTableChange"
          >
            <template v-slot:action="records">
              <span class="operation deatil-color" @click="addEditHandle(records)">编辑 </span>
              <span class="operation warnColor" @click="showDelete(records)">删除 </span>
            </template>
          </a-table>
        </div>
      </div>
      <allMessage
        ref="allMessage"
        :publicVisible="publicVisible"
        @cancel="publicVisible = false"
        @tipMessage="tipMessage"
      ></allMessage>
      <drawer-modal ref="drawerModal" @refresh="searchQuery()"></drawer-modal>
    </a-drawer>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { deleteAction, getAction, downFile, getFileAccessHttpUrl } from '@/api/manage'
import { hoteleviceConfigDelete } from '@/api/industry'
import allMessage from '@/components/allMessage'
import drawerModal from './drawerModal'
export default {
  name: 'DictItemList',
  mixins: [JeecgListMixin],
  components: { allMessage, drawerModal },
  data () {
    return {
      queryParam: {},
      title: '操作',
      visible: false,
      screenWidth: 1200,
      publicVisible: false,
      disableMixinCreated: true,
      url: {
        list: '',
      },
      columns: [
        {
          title: '名称',
          align: 'center',
          ellipsis: true,
          dataIndex: 'deviceConfigName',
        },
        {
          title: '排序值',
          align: 'center',
          ellipsis: true,
          dataIndex: 'deviceConfigOrder',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          align: 'center',
        },
      ],
    }
  },
  created () {
    this.resetScreenSize()
    // this.searchQuery()
  },
  methods: {
    show (url) {
      this.url.list = url
      this.searchQuery()
      this.visible = true
    },
    addEditHandle (records) {
      this.$refs.drawerModal.show(records)
    },
    searchQuery (arg) {
      var params = this.getQueryParams()
      this.loading = true
      getAction(this.url.list, params)
        .then((res) => {
          if (res.code == 200) {
            this.dataSource = res.result
          } else {
            this.$message.warning(res.message)
          }
        }).catch(rsp => {
          console.log(rsp)
        })
        .finally(() => {
          this.loading = false
        })
    },
    searchReset () {
      this.queryParam = {}
      this.searchQuery()
    },
    showDelete (records) {
      this.publicVisible = true
      this.$refs.allMessage.show(records)
    },
    tipMessage (records) {
      console.log(records, 'records')
      hoteleviceConfigDelete({ id: records.id }).then((res) => {
        this.$message.success(res.message)
        this.publicVisible = false
        this.searchQuery()
      })
    },
    onClose () {
      this.visible = false
      this.form.resetFields()
      this.dataSource = []
    },

    // 抽屉的宽度随着屏幕大小来改变
    resetScreenSize () {
      let screenWidth = document.body.clientWidth
      if (screenWidth < 600) {
        this.screenWidth = screenWidth
      } else {
        this.screenWidth = 600
      }
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .data-rule-invalid {
  background: #f4f4f4;
  color: #bababa;
}
/deep/ .ant-card-body {
  padding: 0 !important;
}
</style>
